<template>
  <div class="login-container">
    <div class="login-form">
      <Card :bordered="false" class="login-card">
        <Form
          ref="formInline"
          :model="formInline"
          :rules="ruleInline"
          :label-width="70"
        >
          <FormItem>
            <h3>xxx后台管理系统</h3>
          </FormItem>
          <FormItem prop="user" label="用户名">
            <i-input
              type="text"
              v-model="formInline.user"
              placeholder="Username"
            >
            </i-input>
          </FormItem>
          <FormItem prop="password" label="密码">
            <i-input
              type="password"
              v-model="formInline.password"
              placeholder="Password"
            >
            </i-input>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleSubmit('formInline')"
              >登录</Button
            >
          </FormItem>
        </Form>
      </Card>
    </div>
  </div>
</template>
<script>
  import { mapActions} from 'vuex'
export default {
  data() {
    return {
      formInline: {
        user: "",
        password: "",
      },
      ruleInline: {
        user: [
          {
            required: true,
            message: "Please fill in the user name",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "Please fill in the password.",
            trigger: "blur",
          },
          // {
          //   type: "string",
          //   min: 6,
          //   message: "The password length cannot be less than 6 bits",
          //   trigger: "blur",
          // },
        ],
      },
    };
  },
  methods: {
     handleSubmit(name) {
       this.$refs[name].validate((valid) => {
        if (valid) {
        //   this.$Message.success("Success!");
        // //   vux中user暂未有值
        // this.$API.GET_USER().then(res => {
        //   this.
        //   console.log(res);
          this.POST_USER()
          setTimeout(() => {
          this.$router.push({name:'home'})
          },1000)

        // })
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    ...mapActions(['POST_USER'])
    // ...mapMutations([SAVE_USER])
  },
};
</script>

<style lang="scss" scoped>
.login-container {
  position: relative;
  height: 100vh;
  background: url(../assets/background.jpg) no-repeat;
  .login-form {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(-50%, -50%);
    .login-card {
      width: 300px;
      height: 350px;
    }
  }
}
</style>